import { select_node_staticNode } from './cla_select_node_staticNode';

import { select_node_eventBind } from './cla_select_node_eventBind';

import {
  node_attri_selected,
  select_node_tag_empty_view_default_tag,
  spacename_select_node,
} from '../DataDefine/sourceData';
import {
  appearEl_child_func_promise,
  create_ListenEvent_mana,
  disappearEl_child_func_promise,
  emptyClone,
  endsTimeAnimation,
  normalizeContainer,
  ObjectOnlyPushSet,
  packNode,
  remove_class,
  removeObjectOnlyPushSet,
} from '../../../../../global';
import {
  css_high_light_dom,
  css_wind_light,
  css_wind_light_hover,
} from '../../../../../global/element/DataDefine/sourceData';
import {
  active_cur_node,
  disactive_cur_node,
} from '../../../Func/avtive_cur_node';
import { prop_select_node_defprop_select_multiple } from './cla_select_node_prop';

const select_node_dataManaTag = 'select_node_dataMana';

class select_node_dataMana extends select_node_staticNode {
  get [Symbol.toStringTag]() {
    return select_node_dataManaTag;
  }

  constructor(props) {
    super(props);

    if (this.props[prop_select_node_defprop_select_multiple] != undefined) {
      this.is_multiple_select = ['true', true].includes(
        this.props[prop_select_node_defprop_select_multiple]
      )
        ? true
        : false;
    }
  }

  /**
   * 是否 多选
   */
  is_multiple_select = true;

  /**
   * 设置 选项模式 多选
   */
  set_multiple_select() {
    this.is_multiple_select = true;
  }

  /**
   * 设置 选项模式 单选
   */
  set_single_select() {
    this.is_multiple_select = false;
  }

  /**
   * 上次 选中 元素 集
   * @type {string[]}
   */
  last_selected_items_id_arr = [];

  /**
   * 选中 元素 集
   * @type {string[]}
   */
  cur_selected_items_id_arr = [];

  /**
   * 事件 绑定 this
   */
  eventBind = new select_node_eventBind();

  /**
   * 事件 监听管理
   */
  eventM = create_ListenEvent_mana(spacename_select_node);

  /**
   * 将 当前 元素 更订 为 选取 项
   * @param {HTMLElement} cur_node
   */
  set_cur_node_selected(cur_node) {
    ObjectOnlyPushSet(this.cur_selected_items_id_arr, cur_node.id);
    // 添加 选中 属性
    set_cur_node_attri_selected(cur_node);

    /**
     * 选中 动画
     */
    active_cur_node(cur_node);

    /**
     * 单选时
     * 超过 一个 时
     *
     * 移除 第一个
     */
    if (!this.is_multiple_select && this.cur_selected_items_id_arr.length > 1) {
      let last_node = normalizeContainer(this.cur_selected_items_id_arr[0]);
      this.remove_cur_node_selected(last_node);
    }
  }

  /**
   * 将 当前 元素 更订 为 未选取 项
   * @param {HTMLElement} cur_node
   */
  remove_cur_node_selected(cur_node) {
    removeObjectOnlyPushSet(this.cur_selected_items_id_arr, cur_node.id);

    // 移除 选中属性
    set_cur_node_attri_not_selecte(cur_node);

    /**
     * 移除 选中 动画
     */
    disactive_cur_node(cur_node);
  }

  /**
   * 展开 select_node 选项卡
   */
  async open_focusDisplay() {
    // 显示 浮动元素
    this.dom_focusDisplay.showModal();

    this.#append_content();

    await this.#appear_content();
  }

  /**
   * 关闭 select_node 选项卡
   */
  async close_focusDisplay() {
    this.#display_view();

    await this.#disappear_content();

    this.#remove_content();

    // 关闭 浮动元素
    this.dom_focusDisplay.close();

    this.high_light_increase_dom();

    /**
     * 记录 当前 选项集
     */
    this.last_selected_items_id_arr = emptyClone(
      this.cur_selected_items_id_arr
    );
  }

  /**
   * 移入 内容元素
   */
  #append_content() {
    do {
      const child_node = this.dom_content.firstElementChild;
      packNode(this.dom_focusDisplay_container, child_node);
    } while (this.dom_content.firstElementChild != null);
  }

  /**
   * 移回 内容元素
   */
  #remove_content() {
    do {
      const child_node = this.dom_focusDisplay_container.firstElementChild;
      packNode(this.dom_content, child_node);
    } while (this.dom_focusDisplay_container.firstElementChild != null);
  }

  /**
   * 显示 动画
   */
  async #appear_content() {
    await appearEl_child_func_promise(this.dom_focusDisplay);
  }

  /**
   * 移入 内容元素
   */
  async #disappear_content() {
    await disappearEl_child_func_promise(this.dom_focusDisplay);
  }

  /**
   * 将 当前 选中数据 clone 一份 相关 node 到 视窗展示
   */
  #display_view() {
    let cur_keyVal_dom;
    if (this.cur_selected_items_id_arr.length == 0) {
      this.dom_view.innerHTML = select_node_tag_empty_view_default_tag;
      return;
    }

    this.dom_view.innerHTML = '';
    for (const keyVal_id of this.cur_selected_items_id_arr) {
      cur_keyVal_dom = normalizeContainer(keyVal_id).cloneNode(true);
      remove_class(cur_keyVal_dom, css_wind_light_hover);
      remove_class(cur_keyVal_dom, css_wind_light, true);
      packNode(this.dom_view, cur_keyVal_dom);
    }
  }

  high_light_increase_dom() {
    for (const cur_dom_id of this.cur_selected_items_id_arr) {
      if (this.last_selected_items_id_arr.includes(cur_dom_id)) {
        continue;
      }

      let cur_dom = normalizeContainer(cur_dom_id);

      endsTimeAnimation(cur_dom, css_high_light_dom);
    }
  }
}

/**
 * 添加 选中 属性
 * @param {HTMLElement} cur_node
 */
function set_cur_node_attri_selected(cur_node) {
  cur_node.setAttribute(node_attri_selected, true);
}
/**
 * 移除 选中属性
 */
function set_cur_node_attri_not_selecte(cur_node) {
  cur_node.removeAttribute(node_attri_selected);
}

/**
 * 检测 当前 元素 是否被选中
 * @param {HTMLElement} cur_node
 */
export function check_cur_node_is_selected(cur_node) {
  if (cur_node.getAttribute(node_attri_selected) != null) {
    return true;
  }
}

export { select_node_dataMana };
